<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标移入移出事件</title>
	</head>
	<body>
		<div id="box">Hello JQuery</div>
		<script src="jquery-1.12.4.min.js"></script>
		<script>
			
			
			/*var div=document.getElementById('box');
			div.onmouseover=function(){
				div.style.background='greenyellow';
			}
			div.onmouseout=function(){
				div.style.background='white';
			}*/ 
			
			
			
			
			/*$('#box').mouseover(
				function(){
					$('this').css('background','greenyellow');
					console.log("123");
				}
			)
			$('div').mouseout(
				function(){
					$('div').css('background','red');
					console.log("456");
				}
			)*/
			
			
			
			$('div').on(
				{
					mouseover:function(){
						$('div').css('background','red');
					},
					mouseout:function(){
						$('div').css('background','yellow');
					},
					click:function(){
						$('div').css('background','black');
					}
				}
			)
		</script>
	</body>
</html>
